<template>
    <!-- 操舱医嘱 -->
    <div class="app-container">
        <div class="content">
            <el-form inline hide-required-asterisk :model="adviceHyperbaricOxygen" ref="adviceHyperbaricOxygen" :rules="rules"
                label-position="left" label-width="50px">
                <el-form-item label-width="100px">
                    <template #label>
                        <span class="small-title">
                            <i></i>
                            <p>基本信息</p>
                        </span>
                    </template>
                </el-form-item>
                <br />
                <el-form-item label="姓名">
                    <el-input v-model="ptInfo.patientName" :readonly="!fromHistory" class="width-150" disabled></el-input>
                </el-form-item>

                <el-form-item v-if="ptInfo.admissionNum" label="住院号" label-width="60px">
                    <el-input v-model="ptInfo.admissionNum" :readonly="!fromHistory" class="width-150" disabled></el-input>
                </el-form-item>

                <el-form-item v-else label="门诊号" label-width="60px">
                    <el-input v-model="ptInfo.outpatientNum" :readonly="!fromHistory" class="width-150" disabled></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-input :readonly="!fromHistory" class="width-150" v-model="ptInfo.gender" disabled></el-input>
                </el-form-item>

                <el-form-item label="年龄">
                    <el-input v-model="ptInfo.age" :readonly="!fromHistory" class="width-150" disabled></el-input>
                </el-form-item>

                <el-form-item label="住址">
                    <template #default>
                        <el-input v-model="ptInfo.addr" class="width-578" :readonly="!fromHistory" ></el-input>
                    </template>
                </el-form-item>

                <el-form-item label="电话">
                    <el-input v-model="ptInfo.phoneNum" class="width-150" :readonly="!fromHistory" disabled></el-input>
                </el-form-item>

                <el-form-item label="门诊">
                    <el-radio-group v-model="ptInfo.patientType" :readonly="!fromHistory" class="width-150">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="床号">
                    <el-input v-model="ptInfo.bedNum" :readonly="!fromHistory" class="width-150" disabled></el-input>
                </el-form-item>

                <el-form-item label="主要诊断" label-width="80px">
                    <el-input v-model="ptInfo.coreDiagnosis" :readonly="!fromHistory" class="width-340"></el-input>
                </el-form-item>
                <br />

                <el-form-item label="操舱注意事项" prop="adviceNote" label-width="100px" style="width: 99%;">
                    <el-input v-model="adviceHyperbaricOxygen.adviceNote" :readonly="!fromHistory"  placeholder="请输入"></el-input>
                </el-form-item>
                <br />
                <el-form-item label-width="100px">
                    <template #label>
                        <span class="small-title">
                            <i></i>
                            <p>操舱医嘱</p>
                        </span>
                    </template>
                </el-form-item>
                <br />
                <el-form-item label="1、表压" label-width="80px" prop="gaugePressure" style="width: 43%;">
                    <el-row>
                        <el-col :span="24">
                            <el-input v-model.number="adviceHyperbaricOxygen.gaugePressure" placeholder="请输入"
                                class="width-150" :readonly="!fromHistory"></el-input>&nbsp;Mpa
                        </el-col>
                    </el-row>

                </el-form-item>
                <br />
                <el-form-item label="2、方案" label-width="80px" prop="singleOxygenMinute">
                    <el-row>
                        <el-col :span="9">
                            <el-input v-model.number="adviceHyperbaricOxygen.singleOxygenMinute" placeholder="请输入"
                                class="width-250" :readonly="!fromHistory">
                                <template slot="prepend">单次吸氧</template>
                                <template slot="append">分钟</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label-width="80px" prop="singleOxygenNum">
                    <el-row>
                        <el-col :span="2">
                            <i class="el-icon-close"></i>&nbsp;
                        </el-col>
                        <el-col :span="8" style="margin-left: 30px;">
                            <el-input v-model.number="adviceHyperbaricOxygen.singleOxygenNum" placeholder="请输入"
                                class="width-180" :readonly="!fromHistory">
                                <template slot="append">次</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label=" " label-width="80px" prop="intervalOxygenMinute">
                    <el-row>
                        <el-col :span="12">
                            <el-input v-model.number="adviceHyperbaricOxygen.intervalOxygenMinute" placeholder="请输入"
                                class="width-250" :readonly="!fromHistory">
                                <template slot="prepend">间隔吸空气</template>
                                <template slot="append">分钟</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="intervalOxygenNum">
                    <el-row>
                        <el-col :span="3">
                            <i class="el-icon-close"></i>
                        </el-col>
                        <el-col :span="9" style="margin-left: 25px;">
                            <el-input v-model.number="adviceHyperbaricOxygen.intervalOxygenNum" placeholder="请输入"
                                class="width-180" :readonly="!fromHistory">
                                <template slot="append">次</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <br />

                <el-form-item label="3、疗程" label-width="80px" prop="exePeriod">
                    <el-row>
                        <el-col :span="10">
                            <el-input v-model.number="adviceHyperbaricOxygen.exePeriod" placeholder="请输入"
                                class="width-150" :readonly="!fromHistory">
                                <template slot="append">次/日</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label-width="80px" prop="periodNum" style="width: 45%;">
                    <el-row>
                        <el-col :span="3">
                            <i class="el-icon-close"></i>
                        </el-col>
                        <el-col :span="9">
                            <el-input v-model.number="adviceHyperbaricOxygen.periodNum" placeholder="请输入"
                                class="width-150" :readonly="!fromHistory">
                                <template slot="append">日</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <br />

                <el-form-item label="医生签名" label-width="80px" prop="doctorSign" >
                    <el-select v-model="adviceHyperbaricOxygen.doctorSign" :readonly="!fromHistory" placeholder="请选择"
                        class="width-150">
                        <el-option v-for="item in doctor" :key="item.aid" :label="item.realname"
                            :value="item.realname"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="申请时间" label-width="80px" v-if="adviceHyperbaricOxygen.createTime">
                    <div class="width-180">{{ adviceHyperbaricOxygen.createTime }}</div>
                </el-form-item>

                <br />

                <el-form-item label="疗效" prop="curativeEffect" >
                    <el-radio-group v-model="adviceHyperbaricOxygen.curativeEffect" :readonly="!fromHistory"
                        class="width-400">
                        <el-radio :label="1">治愈</el-radio>
                        <el-radio :label="2">显著</el-radio>
                        <el-radio :label="3">有效</el-radio>
                        <el-radio :label="4">无效</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="中断治疗原因" label-width="100px" style="width: 100%;" prop="treatmentInterruptionReason">
                    <el-radio-group v-model="adviceHyperbaricOxygen.treatmentInterruptionReason"
                        :readonly="!fromHistory" class="width-400">
                        <el-radio :label="1">治愈</el-radio>
                        <el-radio :label="2">无效</el-radio>
                        <el-radio :label="3">出院</el-radio>
                        <el-radio :label="4">不适应</el-radio>
                        <el-radio :label="5">其他</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br />
                <el-form-item label="液压氧治疗过程中病情简要" label-width="180px" style="width: 110%;" prop="briefCondition">
                    <el-input v-model="adviceHyperbaricOxygen.briefCondition" placeholder="请输入"
                        :readonly="!fromHistory"></el-input>
                </el-form-item>

            </el-form>
            <div id="operationBtn">
                <el-button @click="clickCancel('adviceHyperbaricOxygen')" :type="fromHistory ? 'info' : 'primary'">{{ fromHistory ? '取消' : '返回'
                    }}</el-button>
                <el-button type="primary" v-show="fromHistory"
                    @click="clickSave('adviceHyperbaricOxygen')">保存</el-button>

            </div>
        </div>
    </div>
</template>

<script>
import { deepCopy } from '@/utils/tools.js'
import { queryRoleList } from '@/api/residentPhysician/cureBilling.js'
import moment from 'moment'

export default {
    props: ['adviceHyperbaricOxygen', 'patientInfo', 'fromHistory'],
    data() {
        return {
            ptInfo: {},    //病人信息
            doctor: [],   //医生列表

            rules: {
                adviceNote: [
                    { required: true, message: '该项不能为空' },
                ],
                gaugePressure: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                singleOxygenMinute: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                singleOxygenNum: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                intervalOxygenMinute: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                intervalOxygenNum: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                exePeriod: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                periodNum: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '此项必须为数字值' }
                ],
                doctorSign: [
                    { required: true, message: '该项不能为空' },
                ],
                curativeEffect: [
                    { required: true, message: '该项不能为空' },
                ],
                treatmentInterruptionReason: [
                    { required: true, message: '该项不能为空' },
                ],
                briefCondition: [
                    { required: true, message: '该项不能为空' },
                ],
            }
        }
    },
    methods: {
        //点击保存
        clickSave(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 如果后面医生签名传递ID就 解开这个
                    // let a = this.doctor.find(item => {
                    //     return item.aid === this.adviceHyperbaricOxygen.doctorSign;
                    // });
                    // if (a) {
                    //     this.adviceHyperbaricOxygen.doctorSign = a.realname;
                    // }
                    this.adviceHyperbaricOxygen.isSave = true;
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success'
                    });
                    this.$emit('close');
                } else {
                    this.$notify({
                        title: '警告',
                        message: '请满足所有条件后再提交',
                        type: 'warning'
                    });
                }
            });
        },
        //点击取消
        clickCancel(formName) {
            // this.$confirm('此操作将清空所有所填, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
            //     Object.keys(this.adviceHyperbaricOxygen).forEach((key) => {
            //         this.adviceHyperbaricOxygen[key] = null;
            //     });
            //     this.$emit('close')
            //     if(this.adviceHyperbaricOxygen.doctorSign==null){
            //         let data = this.$store.state.user.user;
            //         this.adviceHyperbaricOxygen.doctorSign=data.realname
            //     }
            // }).catch(() => {
            //     console.log('取消');
            // });
            if(this.adviceHyperbaricOxygen.isSave == true){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('close');
                    } else {
                        this.$notify({
                            title: '警告',
                            message: '请满足所有条件后再退出',
                            type: 'warning'
                        });
                        return ;
                    }
                });
                return ;
            }
            this.$emit('close');
        },
        //获取医生列表
        getDoctorList() {
            queryRoleList({ roleId: 2 }).then(response => {
                let { code, content } = response;
                if (code === 0 && content) {
                    this.doctor = content;
                } else {
                    this.doctor = [];
                }
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mounted() {
        this.getDoctorList();
        this.ptInfo = deepCopy(this.patientInfo);
        this.ptInfo.gender = this.ptInfo.gender == 1 ? '男' : this.ptInfo.gender == 0 ? '女' : '未知';
        this.ptInfo.patientType = this.ptInfo.patientType == 1 ? 1 : 0;
        this.adviceHyperbaricOxygen.createTime = moment(this.adviceHyperbaricOxygen.createTime).format('YYYY-MM-DD HH:mm:ss');
        if(this.adviceHyperbaricOxygen.doctorSign==''){
            let data = this.$store.state.user.user;
            this.adviceHyperbaricOxygen.doctorSign=data.realname
        }
    }
}

</script>

<style lang='scss' scoped>
.app-container {
    background-color: #fff;
    padding-bottom: 0;

    .width-80 {
        width: 80px;
    }

    .width-120 {
        width: 120px;
    }

    .width-150 {
        width: 150px;
    }

    .width-180 {
        width: 180px;
    }

    .width-250 {
        width: 250px;
    }

    .width-400 {
        width: 400px;
    }

    .width-340 {
        width: 340px;
    }

    .width-578 {
        width: 578px;
    }

    .content {
        margin: auto;
        width: 100%;
        height: 100%;
        padding: 10px;

        #operationBtn {
            width: 100%;
            text-align: center;
        }

        /deep/ .el-form-item--small .el-form-item__content {
            width: calc(100% - 100px)
        }

        .el-icon-close {
            font-size: 30px;
            color: #635994;
            font-weight: 600;
            line-height: 33px;
        }


        .small-title {
            font-size: 16px;
            color: #333;
            display: flex;
            align-items: center;

            i {
                display: block;
                width: 5px;
                height: 25px;
                background-color: #169bd5;
                margin-right: 10px;
            }

        }

        .form-div {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
